<template>
  <div class="home">
    <!-- 灰色的蒙层 -->
    <transition name="myfade1">
      <div class="huise" v-show="$route.path == '/home/popup'"></div>
    </transition>
    <!-- popup -->
    <transition name="slide">
      <router-view v-if="$route.path == '/home/popup'"></router-view>
    </transition>
    <div class="top" v-if="($router.path = '/home')">
      <van-search
        v-model="searchValue"
        shape="round"
        placeholder="请输入搜索内容"
        @click="goToPopup"
      />
      <SwipeCom :banner="banner" />
    </div>
    <HomeIcon></HomeIcon>
    <div class="down-time">
      <van-count-down :time="time" format=" 距离2022医师技能考试还有 DD 天" />
    </div>
    <HotNews :hotNewsList="hotNewsList"></HotNews>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeIcon from "../components/HomeIcon";
import SwipeCom from "../components/SwipeCom"
import HotNews from "../components/HotNews"
export default {
  name: "Home",
  components: {
    HomeIcon,SwipeCom,HotNews
  },
  data() {
    return {
      hotNewsList: [
        { url: "https://www.med66.com/yishizigekaoshi/tiaojian/su2202286365.shtml", text: "新版医师法3.1实施，报考学历将收紧！" },
        { url: "https://www.med66.com/yishizigekaoshi/project-yishimianshou/index.shtml", text: "22医师面授好课热招 一步到位层层锁分" },
        { url: "https://www.med66.com/weishengdanweizhaopin/gonggao/wa2202212292.shtml", text: "3月全国医疗卫生事业编报名汇总" },
        { url: "https://www.med66.com/weishengzige/jingyan/ga2202233579.shtml", text: "2022卫生资格各专业科目分值占比！" },
        { url: "https://www.med66.com/zhiyeyaoshikaoshi/zhengce/ha2203015883.shtml", text: "2022执业药师报考条件常见问题解答" },
        { url: "https://www.med66.com/hushi/jingyan/li2201174448.shtml", text: "护考爱打卡：免费刷题 每天都加分！" }
      ],
      loading: false,
      finished: false,
      searchValue: "",
      banner: [
        { image_url: "https://www.med66.com/upload/resources/image/2022/03/21/568041.png" },
        { image_url: "https://www.med66.com/upload/resources/image/2022/03/16/564941.png"},
        { image_url: "https://www.med66.com/upload/resources/image/2022/03/21/568036.png"},
      ],
      time: 115 * 24 * 60 * 60 * 1000,
    };
  },
  methods: {
    goToPopup() {
      this.$router.push("/home/popup");
    }
  },
};
</script>
<style lang="less" scoped>
.home {
  position: absolute;
  min-height: 100%;
  width: 100%;
}
.down-time {
  padding: 3%;
  margin: 5%;
  border: 2px solid #ff8000;
  border-radius: 1rem;
}
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 0.5s linear;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}

.huise {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #000;
  z-index: 99;
}
/* 首页内容的淡出 */
.myfade-leave {
  opacity: 1;
}
.myfade-leave-active {
  transition: opacity 0.5s linear;
}
.myfade-leave-to {
  opacity: 0;
}

/* 只要淡入 */
.myfade1-enter,
.myfade1-leave-to {
  opacity: 0;
}
.myfade1-enter-active,
.myfade1-leave-active {
  transition: opacity 0.5s linear;
}
.myfade1-enter-to,
.myfade1-leave {
  opacity: 1;
}
</style>